import React from "react";
import { Button, Card ,Modal ,Form,Radio,DataPicker,Select,Input,Table} from "antd";
import axios from "./../../axios";
import Utils from "./../../utils/utils";
import BaseForm from "./../../components/BaseForm";
// import ETable from "./../../components/ETable";
import { DatePicker } from "antd";
import moment from "moment"
const FormItem = Form.Item
const RadioGroup= Radio.Group
const TextArea = Input.TextArea
const Option = Select.Option
export default class User extends React.Component {
  state = {
    isVisible:false
  };

  params = {
    page: 1
  };
  
  formList = [
    {
      type: "INPUT",
      label: "用户名",
      field: "uesr_name",
      placeholder: "请输入用户名",
      width: 100
    },
    {
      type: "INPUT",
      label: "手机号",
      field: "uesr_number",
      placeholder: "请输入手机号",
      width: 100
    },
    {
      type: "DATE",
      label: "入职时间",
      field: "uesr_date",
      placeholder: "请输入日期"
    }
  ];

  componentDidMount(){
    this.requestList();
  }

  handleFilter = params => {
    this.params = params;
    this.requestList();
  };

  requestList = () => {
    axios.requestList(this, "/user/list", this.params);
  };

  handleOperate=(type)=>{
    let item = this.state.selectedItem;
    let index = this.state.selectedRowKeys;
    if(type=="create"){
      this.setState({
        type,
        isVisible:true,
        title:"创建员工"
      })
    }
    else if(type=="edit"){
      if(!item ){
        Modal.info({
          title:"提示",
          content:"请选择一个用户"
        })
        return;
      }
      this.setState({
        type,
        isVisible:true,
        title:"编辑员工",
        userInfo:item
      })
    }
    else if(type=="detail"){
      if(!item ){
        Modal.info({
          title:"提示",
          content:"请选择一个用户"
        })
        return;
      }
      this.setState({
        type,
        isVisible:true,
        title:"员工详情",
        userInfo:item
      })
    }
    else{
      if(!item){
        Modal.info({
          title:"提示",
          content:"请选择一个用户"
        })
        return;
      }
      let _this = this
      Modal.confirm({
        title:"确认删除",
        onOk(){
          axios.ajax({
            url:"/user/delete",
            data:{
              params:{
                id:item.id
              }
            }
          }).then((res)=>{
            if(res.code==0){
              _this.setState({
                isVisible:false
              })
              _this.requestList();
            }
          })
        }
      })
    }
  }

  //创建编辑员工提交
  handleSubmit =()=>{
    let type = this.state.type
    let data = this.userForm.props.form.getFieldsValue(); 
    axios.ajax({
      url:type=="create" ? "/user/add" : "/user/edit" ,
      data:{
        params:data
      }
    }).then((ref)=>{
      if(ref.code==0){
        this.userForm.props.form.resetFields(), //清空表单数据
        this.setState({
          isVisible:false
        })
        this.requestList();
      }
    })
  }

  //点击行触发的方法
  onRowClick = (record, index) => {
    let selectKey = [index];
    this.setState({
      selectedRowKeys: selectKey, //选中行的索引
      selectedItem: record //选中行的对象 ,不写这句不显示 checked
    });
  };
  
  render() {
    const columns = [
      {
        title: "id",
        dataIndex: "id"
      },
      {
        title: "用户名",
        dataIndex: "username"
      },
      {
        title: "性别",
        dataIndex: "sex",
        render(sex){
          return{
            1:"男",
            2:"女",
          }[sex]
        }
      },
      {
        title: "状态",
        dataIndex: "state",
        render(state){
          return{
            "1":"在职",
            "2":"离职",
            "3":"在职",
            "4":"离职",
            "5":"在职",
            "6":"离职",
          }[state]
        }
      },
      {
        title: "爱好",
        dataIndex: "interest",
        render(state){
          return{
            "1":"看电视",
            "2":"看书",
            "3":"看电影",
            "4":"睡觉",
            "5":"吃饭",
            "6":"梦游",
            "7":"看电视",
            "8":"看书",
            "9":"看电影",
          }[state]
        }
      },
      {
        title: "生日",
        dataIndex: "birthday"
      },
      {
        title: "联系地址",
        dataIndex: "address"
      },
      {
        title: "早起时间",
        dataIndex: "time"
      }
    ];

    //点击单选按钮触发onChange
    const selectedRowKeys = this.state.selectedRowKeys;
    const rowSelection = {
      type: "radio",
      selectedRowKeys, //官方api 指定选中key数组 和 onChange配合使用
      onChange: selectedRowKeys => {
        this.setState({
          selectedRowKeys , //哪一行
        });
      }
    };

    //控制footer隐藏
    let footer ={}
    if(this.state.type == "detail"){
      footer = {
        footer:null
      }
    }

    return (
      <div>
        <Card>
          <BaseForm formList={this.formList} filterSubmit={this.handleFilter} />
        </Card>
        <Card style={{marginTop:15}}>
          <Button type="primary" icon="plus" onClick={()=>this.handleOperate("create")} style={{marginRight:10}}>创建</Button>
          <Button type="primary" icon="edit" onClick={()=>this.handleOperate("edit")} style={{marginRight:10}}>编辑</Button>
          <Button type="primary" onClick={()=>this.handleOperate("detail")} style={{marginRight:10}}>查看</Button>
          <Button type="primary" icon="delete" onClick={()=>this.handleOperate("delete")} style={{marginRight:10}}>删除</Button>
          {/* <ETable
            style={{marginTop:15}}
            updateSelectedItem={Utils.updateSelectedItem}
            columns={columns}
            dataSource={this.state.list}
            selectedRowKeys={this.state.selectedRowKeys}
            selectedIds={this.state.selectedIds}
            selectedItem={this.state.selectedItem}
            // pagination={this.state.pagination}
            pagination={false}
          /> */}
          <Table
            bordered
            rowSelection={rowSelection}
            onRow={(record, index) => {
              return {
                //点击行
                onClick: () => {
                  this.onRowClick(record, index);
                }
              };
            }}
            columns={columns}
            dataSource={this.state.list}
            pagination={this.state.pagination}
          >
          </Table>
        <Modal 
        title={this.state.title} 
        visible={this.state.isVisible}
        onOk={this.handleSubmit}
        onCancel={()=>{
          this.userForm.props.form.resetFields(), //清空表单数据
          this.setState({
            isVisible:false,
          })
        }}
        width={600}
        {...footer}
        >
          <UserForm 
          userInfo={this.state.userInfo} //编辑时获取选中行的数据
          type={this.state.type} 
          wrappedComponentRef={(inst) => this.userForm = inst } //类似ref 把值存到本地
          />
        </Modal>
        </Card>
      </div>
    );
  }
}

//弹出Modal里的form表单
class UserForm extends React.Component{

  getState = (state) =>{
    return{
      "1":"看电视",
      "2":"看书",
      "3":"看电影",
      "4":"睡觉",
      "5":"吃饭",
      "6":"梦游",
      "7":"看电视",
      "8":"看书",
      "9":"看电影",
    }[state]
  }
  render(){
    let type = this.props.type
    let userInfo = this.props.userInfo || {}
    const { getFieldDecorator} =this.props.form;
    const formItemLayout ={
      labelCol:{span:5},
      wrapperCol:{span:19 }
    }
    return(
      <Form layout="horizontal">
          <FormItem label="用户名"{...formItemLayout}>
            { 
              type=="detail" ? userInfo.username :
              getFieldDecorator("username",{
                initialValue : userInfo.username //初始化值
              })(
                <Input type="text" placeholder="请输入用户名"></Input>
              )
            }
          </FormItem>
          <FormItem label="性别"{...formItemLayout}>
            { 
              type=="detail" ? userInfo.sex=="1"?"男":"女" :
              getFieldDecorator("sex",{
                initialValue : userInfo.sex
              })(
               <RadioGroup>
                 <Radio value={1}>男</Radio>
                 <Radio value={2}>女</Radio>
               </RadioGroup>
              )
            }
          </FormItem>
          <FormItem label="状态"{...formItemLayout}>
            {  
              type=="detail"? this.getState(userInfo.state):
              getFieldDecorator("state",{
                initialValue : userInfo.state
              })(
               <Select>
                 <Option value={1}>在职</Option>
                 <Option value={2}>离职</Option>
                 <Option value={3}>很好</Option>
                 <Option value={4}>很不好</Option>
                 <Option value={5}>不清楚</Option>
               </Select>
              )
            }
          </FormItem>
          <FormItem label="生日"{...formItemLayout}>
            {
              type=="detail" ? userInfo.birthday :
              getFieldDecorator("date",{
                initialValue : moment(userInfo.birthday)
              })(
               <DatePicker></DatePicker>
              )
            }
          </FormItem>
          <FormItem label="联系地址"{...formItemLayout}>
            {
              type=="detail" ? userInfo.address :
              getFieldDecorator("address",{
                initialValue : userInfo.address
              })(
               <TextArea rows={3} placeholder="请输入联系地址"></TextArea>
              )
            }
          </FormItem>
      </Form>
    )
  }
}
UserForm = Form.create({})(UserForm)